<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_计算属性的set和get的写法</title>
  <!-- 
  在 Vue 3 中，计算属性（computed properties）同样支持  `get`  和  `set`  方法。 `get`  方法用于获取计算属性的值，而  `set`  方法用于设置计算属性的值。
  1. 基本语法
  计算属性的基本语法如下：
  import { computed } from 'vue';

  export default {
    setup() {
      const state = reactive({
        firstName: '张',
        lastName: '三'
      });

      const fullName = computed({
        get() {
          return `${state.firstName} ${state.lastName}`; // 返回全名
        },
        set(newValue) {
          const names = newValue.split(' '); // 分割输入的全名
          state.firstName = names[0]; // 设置名
          state.lastName = names[1] || ''; // 设置姓
        }
      });

      return {
        state,
        fullName
      };
    }
  };
  2. 示例解析
  -  `get`  方法：
    - 在上述示例中， `fullName`  的  `get`  方法返回了  `firstName`  和  `lastName`  的组合值。
    - 当在模板中访问  `{{ fullName }}`  时，实际上调用的是  `get`  方法。

  -  `set`  方法：
    -  `set`  方法用于处理用户输入的全名。当用户在输入框中输入新的全名时，会触发  `set`  方法。
    - 在  `set`  方法中，将输入的全名分割成名和姓，并分别更新  `firstName`  和  `lastName` 。

  3. 使用场景
  - 双向数据绑定：通过计算属性的  `set`  方法，可以实现双向数据绑定，方便处理复杂的数据更新逻辑。
  - 数据格式化：当需要在获取和设置数据时进行格式化或处理时，计算属性的  `get`  和  `set`  方法非常有用。

  4. 注意事项
  - 必须定义  `get`  方法：如果定义了  `set`  方法，必须同时定义  `get`  方法。
  - 性能考虑：计算属性的  `get`  方法会被缓存，只有在其依赖的数据变化时才会重新计算，而  `set`  方法则不会缓存。

  总结
  - 计算属性的  `get`  和  `set` ： `get`  方法用于获取值， `set`  方法用于设置值。
  - 双向数据绑定：利用计算属性的  `set`  方法可以实现双向数据绑定。
  - 数据处理：适合用于在获取和设置数据时进行格式化和处理。
  -->
</head>
<body>

  <div id="app">
    <h2>{{ fullName }}</h2>
    <button @click="setFullName">changeName</button>
  </div>

  <script src="../lib/vue.js"></script>
  <script>

    const { createApp, ref, computed } = Vue

    createApp({
      setup() {
        const firstName = ref('computed-get')
        const lastName = ref('computed-set')

        const fullName = computed({
          get() {
            return firstName.value + " " + lastName.value
          },
          set(value) {
            const names = value.split(' ')
            firstName.value = names[0]
            lastName.value = names[1]
          }
        })

        const setFullName = () => {
          fullName.value = 'computed-set1 computed-get2'
        }

        return {
          fullName,
          setFullName
        }
      }
    }).mount('#app')

  </script>
  
</body>
</html>